import React from "react";
import { Breadcrumb } from "antd";

// MdEditor是编辑器组件
import MdEditor from "react-markdown-editor-lite";
// MarkdownIt用于做格式的转换
import MarkdownIt from "markdown-it";
// 对应的css
import "react-markdown-editor-lite/lib/index.css";

// 初始化Markdown解析器
const mdParser = new MarkdownIt(/* Markdown-it options */);

const Index = () => {
  const handleEditorChange = ({ html, text }) => {
    console.log("handleEditorChange", html, text);
  };

  return (
    <div>
      <Breadcrumb
        style={{ marginBottom: 20 }}
        items={[
          {
            title: "编辑器",
          },
          {
            title: "md编辑器",
          },
        ]}
      />

      <MdEditor
        style={{ height: "500px" }}
        renderHTML={(text) => mdParser.render(text)}
        onChange={handleEditorChange}
      />
    </div>
  );
};

export default Index;
